{% extends "layout.phtml" %}

{% block left %}
        <div class="widget nomargin step step-1">
            <div class="head"><h5 class="iAlert">BoxBilling安装程序</h5></div>
            <div class="body">
                <p>这个安装程序会指引你安装上BoxBilling.</p>
        <p>
            <span style="color: rgb(255, 0, 0);">请开启<em>storage</em>服务，并新建名称为<em>&quot;box&quot;</em>的domain<br/></span>
        </p>
        <p>
            <span style="color: rgb(255, 0, 0);">请打开SAE的<em>Memcache</em>扩展</span>
        </p>
            </div>
        </div>

        <div class="widget nomargin step step-2">
            <div class="head"><h5 class="iAlert">数据库设置</h5></div>
            <div class="body">
            <p>
                <span style="color:#c00000;font-size:18px">BoxBillingSAE会自动设置数据库，记得先开启数据库。</span>
            </p>
                <p>BoxBilling在SQL数据库中存储数据。你应该在此之前已经有一个数据库。</p>
                <p>安装程序将创建所需的所有数据库中的表后提供正确的连接细节。</p>
                <h4 class="pt10">如何创建数据库？</h4>
                <p>这取决于你的主机供应商数据库可以以不同的方式创建。</p>
                <p>最好的办法是与你的网站主办的帐户查询提供的文档。如果你被卡住您可以联系他们的支持。</p>
            </div>
        </div>

        <div class="widget nomargin step step-3">
            <div class="head"><h5 class="iAlert">管理员账户</h5></div>
            <div class="body">
                <p>这是控制boxbilling各方面的主要用户帐户。</p>
                <p>电子邮件将用于登录到管理区。</p>
                <p>确认密码强劲。</p>
            </div>
        </div>

        <div class="widget step step-3" style="display:none">
            <div class="head"><h5 class="iAlert">BoxBilling许可证密钥</h5></div>
            <div class="body">
                <p>密钥我帮你填好了，感谢我把</p>
            </div>
        </div>

        <div class="widget nomargin step step-4">
            <div class="head"><h5 class="iAlert">就完成啦！</h5></div>
            <div class="body aligncenter">
                <p>感谢安装BoxBilling</p>
                <a href="{{ live_site }}" title="" class="btnIconLeft mr10 mt10" target="_blank"><img src="images/user.png" alt="" class="icon"><span>客户区</span></a>
                <a href="{{ admin_site }}" title="" class="btnIconLeft mr10 mt10" target="_blank"><img src="images/adminUser.png" alt="" class="icon"><span>后台面板</span></a>
            </div>
        </div>

{% endblock %}


{% block content %}
        <form action="" class="mainForm" method="get" id="installer">
            <fieldset>
                <div class="widget nomargin">
                    <div class="wizard swMain">
                        <noscript>
                            <div style="border:red solid 5px; padding: 10px">
                                <p> For full functionality of this installer and most of BoxBilling features it is
                                    necessary to enable JavaScript.<br/>
                                    Here are the <a href="http://www.enable-javascript.com/" target="_blank">
                                        instructions how to enable JavaScript in your web browser</a>. </p>
                                <p>
                                    If you can not enable JavaScript for some reason you can follow these steps in
                                    order to setup BoxBilling: <br/>
                                    * Rename "bb-config-sample.php" file to "bb-config.php", fill in the values and change this file permissions to read only (CHMOD 644).<br/>
                                    * Import /install/structure.sql to your database<br/>
                                    * Import /install/content.sql to your database<br/>
                                    * Open browser <a href="{{constant("BB_URL")}}index.php?_url=/bb-admin">{{constant("BB_URL")}}index.php?_url=/bb-admin</a> to create new admin
                                    account.<br/>
                                    * Remove /install directory<br/>
                                </p>
                            </div>
                        </noscript>
<ul>
<li><a href="#step-1" class="bordLeft wFirst"><h5 class="stepDesc iSettings">准备</h5></a></li>
<li><a href="#step-2"><h5 class="stepDesc iDatabase">数据库</h5></a></li>
<li><a href="#step-3"><h5 class="stepDesc iAdminUser">管理</h5></a></li>
<li><a href="#step-4" class="bordRight"><h5 class="stepDesc iFlag">完成</h5></a></li>
</ul>

                        <div id="step-1">
                            <table cellpadding="0" cellspacing="0" width="100%" class="tableStatic">
                                <tbody>
                                    <tr class="noborder">
                                        <td>操作系统</td>
                                        <td><strong class="{{ os_ok ? 'green' : 'red'}}">{{ os }}</strong></td>
                                        <td>{% if not os_ok %}BoxBilling 可能不会在你的系统上工作！{% endif %}</td>
                                    </tr>

                                    <tr>
                                        <td>PHP 版本</td>
                                        <td><strong class="{{ php_ver_ok ? 'green' : 'red'}}">{{ php_ver }}</strong></td>
                                        <td>{% if not php_ver_ok %}需要版本 >{{ php_ver_req }}{% endif %}</td>
                                    </tr>

                                    <tr>
                                        <td>PHP 安全模式</td>
                                        <td><strong class="{{ php_safe_mode ? 'red' : 'green'}}">{{ php_safe_mode ? 'ON' : 'OFF'}}</strong></td>
                                        <td>{% if php_safe_mode %}PHP 安全模式应该关闭{% endif %}</td>
                                    </tr>
                                    
                                    {% for ext,loaded in extensions %}
                                    <tr>
                                        <td>PHP 与SAE 扩展: <strong>{{ ext }}</strong></td>
                                        <td><strong class="{{ loaded ? 'green' : 'red'}}">{{ loaded ? 'Ok' : 'Fail'}}</strong></td>
                                        <td>{% if not loaded %}请打开 <strong> {{ ext }} 扩展</strong>{% endif %}</td>
                                    </tr>
                                    {% endfor %}

                                    {% for file,writable in files %}
                                    <tr>
                                        <td>{{ file }}</td>
                                        <td><strong class="{{ writable ? 'green' : 'red'}}">{{ writable ? 'Yes' : 'No'}}</strong></td>
                                        <td>{% if not writable %} 请确保文件存在而且可写.{%endif%}</td>
                                    </tr>
                                    {% endfor %}

                                    {% for folder,writable in folders %}
                                    <tr>
                                        <td>{{ folder }}</td>
                                        <td><strong class="{{ writable ? 'green' : 'red'}}">{{ writable ? 'Yes' : 'No'}}</strong></td>
                                        <td>{% if not writable %} 请确保目录存在而且可写 {%endif%}</td>
                                    </tr>
                                    {% endfor %}
                                    
                                </tbody>
                            </table>
    
                            {% if tos %}
                            <div class="rowElem">
                                <label class="topLabel">服务条款:</label>
                                <div class="formBottom">
                                    <textarea cols="5" rows="8">{{ tos }}</textarea>
                                </div>
                                <div class="formBottom">
                                    <input type="hidden" name="agree" value="0"/>
                                    <input id="agree" type="checkbox" name="agree" value="1"{% if agree %} checked="checked"{% endif %}/> 我同意 
                                </div>
                            </div>
                            {% endif %}
                            <div class="fix"></div>
                        </div>                     

                        <div id="step-2">   
                            <div class="rowElem nobg">
                                <label>数据库主机地址:</label>
                                <div class="formRight">
                                    <input type="text" id="db_host" name="db_host" value="{{ db_host|default('db_host_sae') }}" required="required" placeholder="localhost"/>
                                </div>
                                <div class="fix"></div>
                            </div>
                            <div class="rowElem">
                                <label>数据库名称:</label>
                                <div class="formRight">
                                    <input type="text" id="db_name" name="db_name" value="{{ request.db_name|default('db_name_sae') }}" required="required" placeholder="boxbilling"/>
                                </div>
                                <div class="fix"></div>
                            </div>
                            <div class="rowElem">
                                <label>数据库用户名:</label>
                                <div class="formRight">
                                    <input type="text" id="db_user" name="db_user" value="{{ request.db_user|default('db_user_sae') }}" required="required" placeholder="username"/>
                                </div>
                                <div class="fix"></div>
                            </div>
                            <div class="rowElem">
                                <label>数据库密码</label>
                                <div class="formRight">
                                    <input type="password" id="db_pass" name="db_pass" value="{{ request.db_pass|default('db_pass_sae') }}" placeholder="******"/>
                                </div>
                                <div class="fix"></div>
                            </div>
                            
                            <div class="fix"></div>
                        </div>
                        
                        <div id="step-3">
                            <div class="rowElem nobg">
                                <label>管理员名称::</label>
                                <div class="formRight">
                                    <input type="text" name="admin_name" id="admin_name" value="{{ request.admin_name|default(admin_name) }}" autocomplete="off" required="required" placeholder="Administrator Name"/>
                                </div>
                                <div class="fix"></div>
                            </div>
                            
                            <div class="rowElem">
                                <label>Email:</label>
                                <div class="formRight">
                                    <input type="text" name="admin_email" id="admin_email" value="{{ request.admin_email|default(admin_email) }}" autocomplete="off" required="required" placeholder="admin@yourdomain.com"/>
                                </div>
                                <div class="fix"></div>
                            </div>
                            
                            <div class="rowElem">
                                <label>密码:</label>
                                <div class="formRight">
                                    <input type="password" name="admin_pass" id="admin_pass" value="{{ request.admin_pass|default(admin_pass) }}" autocomplete="off" required="required" placeholder="Administrator password"/>
                                </div>
                                <div class="fix"></div>
                            </div>

                            <div class="rowElem">
                                <label>许可秘钥:</label>
                                <div class="formRight" style="margin-right: 0; width: 540px">
                                    <input style="width: 427px;" type="text" name="license" id="license" value="{{ request.license|default('license by x-lu.com') }}" required="required" placeholder="license By x-lu.com">
                                </div>
                                <div class="fix"></div>
                            </div>
                            <div class="fix"></div>
                        </div>
                        <div id="step-4">
                            <div class="body">
                                <h1 class="pt10">恭喜，Boxbilling安装完成.</h1>

                                <p>虽然完成安装了，你还需要做以下事情.</p>

                                <h2 class="pt20">后台设置Email为Smtp方式</h2>
                                <p>sae不支持sendmail。所以采用了smtp服务器方式</p>
                                <pre><a href="{{ admin_site }}/extension/settings/email#tab-email" target="_blank">设置Email</a></pre>


                                <h2 class="pt20">设置计划任务</h2>
                                <p>设置这个计划任务每五分钟执行一次</p>
                                <pre>*/5 * * * * php {{ cron_path }}</pre>

                            </div>
                        </div>
                    </div>
                    <div class="fix"></div>
                </div>
            </fieldset>
        </form>
{% endblock %}

{% block js %}
<div id="overlay" style="position: absolute; display: none; z-index: 1000; background-color: whitesmoke; width: 725px; height: 50px; opacity:0.5;"></div>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.smartWizard.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    $('.wizard').smartWizard({
        selected: 0,  // Selected Step, 0 = first step
        keyNavigation: true, // Enable/Disable key navigation(left and right keys are used if enabled)
        enableAllSteps: false,  // Enable/Disable all steps on first load
        transitionEffect: 'fade', // Effect on navigation, none/fade/slide/slideleft
        contentURL:null, // specifying content url enables ajax content loading
        contentCache:false, // cache step contents, if false content is fetched always from ajax url
        cycleSteps: false, // cycle step navigation
        enableFinishButton: false, // makes finish button enabled always
        errorSteps:[],    // array of step numbers to highlighting as error steps
        labelNext:'Next', // label for Next button
        labelPrevious:'Previous', // label for Previous button
        labelFinish:'Finish',  // label for Finish button        
      // Events
        onLeaveStep: function(o, c){ if(c.fromStep < c.toStep) { return validateSteps(c.fromStep); } else { return true; } }, // triggers when leaving a step
        onShowStep: function(o, c){ return showStep(c.toStep); },  // triggers when showing a step
        onFinish: doFinish  // triggers when Finish button is clicked
     });

    $("#overlay").ajaxStart(function(){
        var o = $('.wizard').offset();
        $(this).css('height', $('.wizard').height()-2).offset({top: o.top+1, left:o.left+1}).show();
    }).ajaxStop(function(){
        $(this).hide();
    });
});

    function doFinish(){
        $('#installer').hide();
        $('.leftNav').animate({
            width: '980px'
        }, 400);
        //$('.leftNav').css('width', '980px');
        return false;
    }
    
    function showStep(stepnumber){
        $('.step').hide();
        $('.step.step-'+stepnumber).fadeIn();
    }
    
    function validateSteps(stepnumber){
        var url = '{{constant("BB_URL_INSTALL")}}index.php?a=';
        var data = $('#installer').serialize();
        var ok = false;

        if(stepnumber == 1){
            if(!$('#agree').is(':checked')) {
                alert('You must agree with terms of service');
                return false;
            }
        }
        
        if(stepnumber == 2){
            if(isEmpty('db_host')) return false;
            if(isEmpty('db_name')) return false;
            if(isEmpty('db_user')) return false;
            
            $.ajax({
                async: false,
                type: "POST",
                url: url+'check-db',
                data: data
            }).done(function( msg ) {
                if(msg != 'ok') {
                    alert(msg);
                } else {
                    ok = true;
                }
            });
            return ok;
        }
        
        if(stepnumber == 3){
            if(isEmpty('admin_name')) return false;
            if(isEmpty('admin_email')) return false;
            if(isEmpty('admin_pass')) return false;
            if(isEmpty('license')) return false;
            if(confirm('BoxBilling installer will create database. It may take some time. Do not close this window. Continue?')) {
                $.ajax({
                    async: false,
                    type: "POST",
                    url: url+'install',
                    data: data
                }).done(function( msg ) {
                    if(msg != 'ok') {
                        alert(msg);
                    } else {
                        $('.buttonNext').text('Installed');
                        $('.buttonPrevious').hide();
                        ok = true;
                    }
                });
                return ok;
            } else {
                return false;
            }
        }
        return true;
    }
    
    function isEmpty(id)
    {
        if(!$('#'+id).val()) {
            $('#'+id).addClass('error');
            return true;
        } else {
            $('#'+id).removeClass('error');
            return false;
        }
    }
    
</script>
{% endblock %}